/*
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-18 15:37:24
 * @LastEditors  : cxguo
 * @LastEditTime : 2019-12-26 17:09:51
 */
import { getTableIndexColHeader } from '@/utils/vxe-table/render.js'
import { getPriceBySkuunit } from '@/api/goods/goods-sku.js'

export default {
  data() {
    return {
      currentRowIndex: null,
      originColumnsData: [
        { title: '#',
          type: 'index',
          fixed: 'left',
          width: 80,
          field: null,
          align: 'center',
          slots: {
            default: ({ row, seq }) => {
              const rowId = row._XID
              const value = seq
              if (this.currentRowIndex !== rowId) return [<span>{value}</span>]
              const addData = {
                props: {
                  value: row.costNote,
                  circle: true,
                  type: 'success',
                  size: 'mini',
                  icon: 'el-icon-plus'
                },
                on: {
                  'click': () => {
                    this.btnAddTableData()
                  }
                }
              }
              const delData = {
                props: {
                  value: row.costNote,
                  circle: true,
                  type: 'danger',
                  size: 'mini',
                  icon: 'el-icon-close'
                },
                on: {
                  'click': () => {
                    this.btnRemoveTableData(row)
                  }
                }
              }
              return [
                <div class='btn-group table-oper'>
                  <el-button {...addData}/>
                  <el-button {...delData}/>
                </div>
              ]
            },
            header: ({ column }) => {
              const events = { click: this.btnSteup }
              return getTableIndexColHeader.call(this, { column, events })
            }
          }
        },
        { field: 'name',
          title: '商品名称/规格',
          positionDisable: true,
          showOverflow: true,
          width: '280',
          editRender: { name: 'ElInputAndButton', props: { size: 'mini' }, events: { click: this.btnChooseGoods, input: this.onGoodsNameInput }}
        },
        { field: 'code',
          title: '商品编号',
          positionDisable: true,
          editRender: { name: 'ElInput', props: { size: 'mini' }}
        },
        { field: 'quantity', title: '数量', width: 160,
          positionDisable: true,
          cellRender: { name: 'ElInputNumberShowBySure', props: { size: 'mini', min: 0 },
            events: { change: this.onQuantityChange }
          }
        },
        { field: 'unit', title: '单位',
          positionDisable: true,
          cellRender: { name: 'ElDropdownShowBySure', props: { size: 'mini', clearable: true },
            events: { getLabel: (item) => { return item.label }, change: this.onUnitChange }}
        },
        { field: 'price', title: '单价', align: 'right',
          cellRender: { name: 'ElDropdownShowBySure', options: [], props: { size: 'mini' },
            events: { getLabel: (item) => { return `${item.value}-${item.label}` }, change: this.onPriceChange }}
        },
        { field: 'total', title: '金额', align: 'right' },
        { field: 'remark', title: '备注',
          cellRender: { name: 'ElInputShowBySure', props: { size: 'mini' }}
        }
      ]
    }
  },
  methods: {
    formatPriceOptions(priceObj) {
      const options = []
      Object.keys(priceObj).forEach(key => {
        const obj = {}
        obj['value'] = priceObj[key]
        obj['label'] = `${key}-${priceObj[key]}`
        options.push(obj)
      })
      return options
    },
    getPriceOptions(skuId, unitId) {
      return new Promise((resovle, reject) => {
        getPriceBySkuunit({ skuId, unitId }).then(res => {
          let options = []
          if (!res.data.flag) {
            this.$message.error('获取价格失败！')
            options = []
          } else {
            const priceStr = res.data.data.pricePurchase
            const price = JSON.parse(priceStr)
            options = this.formatPriceOptions(price)
          }
          resovle(options)
        }).catch(err => {
          reject(err)
        })
      })
    },
    initUnitOptions(row) {
      const unitbase = row.unitbase
      const unitvice = row.unitvice
      const options = [JSON.parse(unitbase), ...JSON.parse(unitvice)]
      if (options.length === 1) {
        const value = options[0].value
        this.$set(row, 'unit', value)
        this.onUnitChange(value, row)
      }
      this.$set(row.options, 'unit', options)
    },
    onQuantityChange(row, params) {
      const totalPrice = this.getGoodsTotal(row)
      this.$set(row, 'total', totalPrice)
    },
    onUnitChange(value, row) {
      const skuId = row.skuId
      const unitId = value
      this.getPriceOptions(skuId, unitId).then(options => {
        this.$set(row.options, 'price', options)
        if (options.length === 1) {
          this.$set(row, 'price', options[0].value)
        }
      })
    },
    onPriceChange(value, row) {
      const totalPrice = this.getGoodsTotal(row)
      this.$set(row, 'total', totalPrice)
    }
  }
}
